<template>
	<view class="content" style="padding: 10px;background-color: #F1F2e5;">
		<view style="background: #F1F2e5; margin-bottom:15rpx;width: 100%;height: 50rpx;"></view>
        <u-form labelWidth="80px" style="width: 100%;" labelPosition="top">
        基本信息
        <view style="background-color: white;border-radius: 20px;padding: 10px;margin-top: 10px;margin-bottom: 10px;">
		<u-form-item label="物品名称" borderBottom>
            <u-input border="none" v-model="ClientGoodInfo.goodsName" placeholder="请输入物品名称"></u-input>
        </u-form-item>
        <u-form-item label="联系方式" borderBottom>
            <u-input border="none" v-model="ClientGoodInfo.phone"  placeholder="请输入手机号或微信号"></u-input>
        </u-form-item>
        <u-form-item label="姓名" >
            <u-input border="none" v-model="ClientGoodInfo.contactName"  placeholder="请输入姓名"></u-input>
        </u-form-item>
        </view>
        图片
        <view style="background-color: white;border-radius: 20px;padding: 10px;margin-top: 10px;">
        <u-form-item label="商品配图" borderBottom>
            	<u-upload
            		:fileList="fileList1"
            		@delete="deletePic"
                    @afterRead="afterRead"
            		:maxCount="10"
            	></u-upload>
        </u-form-item>
       
        <u-form-item label="介绍配图" >
            	<u-upload
            		:fileList="jsfileList1"
            		@delete="jsdeletePic"
                    @afterRead="jsafterRead"
            		:maxCount="10"
            	></u-upload>
        </u-form-item>
        </view>
        <u-row style="margin-top: 10px;">
            <u-col span="2">属性</u-col>
            <u-col span="8"></u-col>
            <u-col span="2">
                
            	<u-button :custom-style="{backgroundColor:'rbga (123,123,123,0)',color:'#35356b'}" :plain="true" @click="guigelist.push({specs:'',specsValue:''})" text="添加属性" style="width: 60px;" ></u-button>
            </u-col>
        </u-row>
     
        <u-row style="color: #C0C4CC" v-if="guigelist.length == 0">
            请添加属性
        </u-row>
        <view v-else>
        <view style="background-color: white;border-radius: 20px;padding: 10px;margin-top: 10px;" v-for="(a,b) in guigelist">
            属性{{b+1}}
            <u-form labelWidth="60px">
                <u-form-item  label="属性" borderBottom>
                    <u-input border="none" v-model="a.specs" placeholder="请输入属性"></u-input>
                </u-form-item>
                <u-form-item label="属性值" borderBottom>
                    <u-input border="none" v-model="a.specsValue" placeholder="请输入属性值"></u-input>
                </u-form-item>
            </u-form>
            <u-button @click="delguigelist(b)"  :plain="true" text="删除" style="width: 40px;border:0px;" ></u-button>
        </view>
        </view>
        </u-form>
		<view style="height: 200px;">
		</view>
        <u-button shape="circle" :custom-style="{backgroundColor:'#d7000f',border:'0px'}"  @click="submit" style="position:fixed;bottom: 50px;margin: 0 auto;width: 95%;" type="primary" text="发布"></u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                guigelist:[],
				title: 'Hello',
                userId:'1',
                fileList1:[],
                jsfileList1:[],
				ClientGoodInfo:{
					goodsName:'',
					phone:'',
					contactName:''
				}
			}
		},
		onLoad() {
    
            this.userId = uni.getStorageSync("loginId")
		},
		methods: {
            delguigelist(index){
              this.guigelist.splice(index,1)  
            },
            deletePic(a){
              this.fileList1.splice(a.index,1)  
            },
             afterRead(event){
				 
                console.log(event)
                this.fileList1.push(event.file)
            },
            jsdeletePic(a){
              this.jsfileList1.splice(a.index,1)  
            },
             jsafterRead(event){
                console.log(event)
                this.jsfileList1.push(event.file)
            },
			async submit(){
				if(this.ClientGoodInfo.goodsName&&this.ClientGoodInfo.phone&&this.ClientGoodInfo.contactName){
				
					
				var formdata = new FormData()
                formdata.set('sellerId',this.userId)
				for(var a in this.ClientGoodInfo){
					if(this.ClientGoodInfo[a]){
						
					formdata.set(a,this.ClientGoodInfo[a])
					}
				}
				if(this.fileList1.length >0){
					for(var a in this.fileList1){
							var blod = await new Promise((resolve,reject) => {
								fetch(this.fileList1[a].url).then((response) => response.blob()).then((res) => {
								  
								        let blod = new Blob([res]);
								       resolve(blod)
								    });
							})
							console.log(this.fileList1[a].name)
							console.log(blod)
						formdata.append("goodsImg",blod,this.fileList1[a].name)
					}
				}
				if(this.jsfileList1.length >0){
					console.log(this.jsfileList1)
					for(var a in this.jsfileList1){
							var blod = await new Promise((resolve,reject) => {
								fetch(this.jsfileList1[a].url).then((response) => response.blob()).then((res) => {
								  
								        let blod = new Blob([res]);
								       resolve(blod)
								    });
							})
						formdata.append("viewImg",blod,this.jsfileList1[a].name)
					}
				}
				
				if(this.guigelist.length>0){
						formdata.append("JSONspecs",JSON.stringify(this.guigelist)) 
						
				}
					
				this.$axios.post('http://'+this.$host+':'+this.$port+'/publish/publishSaveAdd',formdata).then(res => {
					console.log(res)
					uni.showToast({
					    title: '成功',
					    //将值设置为 success 或者直接不用写icon这个参数
					    icon: 'success',
					    //显示持续时间为 2秒
					    duration: 2000
					})
					
					setTimeout(function () {
						uni.navigateBack({
							delta: 1
						});
					}, 2000);
				
				})
				}
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
    .u-form-item /deep/ .u-form-item__body{
        padding:0px;
    }
    .u-button--plain[data-v-2bf0e569] {
        background-color: #fff0;
        color: #d7000f;
        font-size: 18px;
    }
    .u-form-item{
        margin-bottom: 10px;
    }
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
